<template>
  <el-dialog
    :model-value="yamlNodeDialogVisible"
    title="详情"
    width="80%"
    @close="handleClose"
  >
      <el-row :gutter="20">
        <!--节点资源-->
        <el-col :span="12">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>节点资源</span>
              </div>
            </template>
                CPU：<el-tag type="warning">已分配{{node_resource.cpu_requests}}核</el-tag>  /  <el-tag type="success">可分配{{node_resource.allocatable_cpu}}核</el-tag>  /  <el-tag type="primary">总量{{node_resource.capacity_cpu}}核</el-tag>
            <hr>
                内存：<el-tag type="warning">已分配{{node_resource.memory_requests}}G</el-tag>  /  <el-tag type="success">可分配{{node_resource.allocatable_memory}}G</el-tag>  /  <el-tag type="primary">总量{{node_resource.capacity_memory}}G</el-tag>
            <hr>
                短暂存储：<el-tag type="success">可分配{{node_resource.allocatable_ephemeral_storage}}G</el-tag>  /  <el-tag type="primary">总量{{node_resource.capacity_ephemeral_storage}}G</el-tag>
            <hr>
                Pod数量：<el-tag type="success">已创建{{node_resource.pods_number}}个</el-tag>  /  <el-tag type="primary">总量{{node_resource.capacity_pods}}个</el-tag>
            <hr>
          </el-card>
        </el-col>
        <!--节点信息-->
        <el-col :span="12">
          <el-card >
            <template #header>
             <div class="card-header">
                <span>节点信息</span>
              </div>
            </template>
            节点名称：<el-tag type="info">{{ node_info.node_name }}</el-tag>
            <hr>
            主机名：<el-tag type="info">{{ node_info.hostname }}</el-tag>
            <hr>
            操作系统：<el-tag type="info">{{ node_info.os }}</el-tag>
            <hr>
            内核：<el-tag type="info">{{ node_info.kernel }}</el-tag>
            <hr>
            CPU架构：<el-tag type="info">{{ node_info.cpu_arch }}</el-tag>
            <hr>
            内部IP：<el-tag type="info">{{ node_info.internal_ip }}</el-tag>
            <hr>
            Pod网络：<el-tag type="info">{{ node_info.pod_cidr }}</el-tag>
            <hr>
            容器运行时：<el-tag type="info">{{ node_info.container_runtime_version }}</el-tag>
            <hr>
            kubelet版本：<el-tag type="info">{{ node_info.kubelet_version }}</el-tag>
            <hr>
            kube-proxy版本：<el-tag type="info">{{ node_info.kube_proxy_version }}</el-tag>
            <hr>
            不可调度：<el-tag type="info">{{ node_info.unschedulable }}</el-tag>
            <hr>
            标签：<el-tag  type="info" v-for="(value,key,index) in node_info.labels">{{ key }}:{{value}}</el-tag>
          </el-card>
        </el-col>
      </el-row>
        <!--Pod列表-->
      <el-card style="margin-top: 20px">
        <template #header>
         <div class="card-header">
            <span>Podl列表</span>
          </div>
        </template>
            <el-table :data="tableData" :show-overflow-tooltip="true" border style="width: 100%">
                <el-table-column prop="pod_name" label="Pod名称"   align="center"/>
                <el-table-column prop="namespace" label="命名空间" align="center" />
                <el-table-column prop="status" label="运行状态"  align="center"/>
                <el-table-column prop="pod_ip" label="Pod IP"  align="center"/>
                <el-table-column prop="cpu_requests" label="CPU请求"  align="center"/>
                <el-table-column prop="cpu_limits" label="CPU限制"   align="center"/>
                <el-table-column prop="memory_requests" label="内存请求"  align="center"/>
                <el-table-column prop="memory_limits" label="内存限制" align="center"/>
                <el-table-column prop="create_time" label="创建时间"  align="center"/>
            </el-table>
            <el-pagination style="float: right"
                v-model:current-page="queryForm.pageNum"
                v-model:page-size="queryForm.pageSize"
                :page-sizes="[10, 20, 30, 40]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </el-card>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch, onMounted, defineProps, defineEmits } from 'vue';
import requestUtil from '@/util/request';
import { ElMessage } from 'element-plus';

// 定义Props
const props = defineProps({
  resource_name: {
    type: String,
    required: true,
    default: '',
  },
  nodeDetailsDialogVisible: {
    type: Boolean,
    required: true,
    default: false,
  },
});

const tableData=ref([])
const total=ref(0)
const queryForm=ref({
  pageNum:1,
  pageSize:10,
})

// 定义Ref
const node_info = ref({})
const node_resource = ref({})

// 定义Emits
const emits = defineEmits(['update:modelValue']);

//节点资源和节点信息
const nodeInfo = async () => {
  let resource_name = props.resource_name
  let res = await requestUtil.get("k8s/node_details", {node_name:resource_name})
  if (res.data.code === 200) {
      console.log(res.data.data,123)
      node_info.value = res.data.data.node_info
      node_resource.value = res.data.data.node_resource
  } else {
    ElMessage({
      type: 'error',
      message: res.data.msg,
    })
  }
}

const initUserList=async ()=>{
  //请求时追加节点名参数进去
  const tempQueryForm = {...queryForm.value, node_name: props.resource_name };
  const res=await requestUtil.get("k8s/node_details_pod_list",tempQueryForm)
  tableData.value=res.data.data
  total.value=res.data.count
}

const handleSizeChange=(pageSize)=>{
  queryForm.value.pageSize=pageSize
  queryForm.value.pageNum=1
  initUserList()
}

const handleCurrentChange=(pageNum)=>{
  queryForm.value.pageNum=pageNum
  initUserList()
}

// 监听打开窗口
watch(() => props.nodeDetailsDialogVisible, (newValue) => {
  if (newValue) {
    nodeInfo();
    initUserList();
  }
});

// 关闭对话框
const handleClose = () => {
  emits('update:modelValue', false);
};

</script>

<style scoped>

</style>